<template>
  <div style="min-width: 809px">
    <div v-if="$route.path == '/usageRecord'">
      <div class="vs-search-box" style="padding: 24px 22px">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="门店">
            <el-select
              style="width: 200px"
              clearable
              v-model="paging.store_id"
              placeholder=""
            >
              <el-option
                v-for="(ele, index) in list"
                :key="index"
                :label="ele.title"
                :value="ele.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单编号">
            <el-input type="text" style="width: 200px" v-model="paging.out_trade_no"></el-input>
          </el-form-item>
          <el-form-item label="" style="float: right; margin-right: 0">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item label="优惠券编号">
            <el-input type="text" style="width: 200px" v-model="paging.coupon_pool_id"></el-input>
          </el-form-item>
          <el-form-item label="订单完成时间:" >
            <el-date-picker
              v-model="time"
              type="daterange"
              align="right"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
              @change="pickerDate"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
          <!-- <el-button
            icon="el-icon-upload2"
            @click="dialogVisible = true"
            style="margin-left: auto"
            type="primary"
            >导出</el-button
          > -->
          <!-- <el-button icon="el-icon-plus" @click="dialogVisible=true" style="margin-left:auto;" type="primary">新增</el-button> -->
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
        >
          <el-table-column label="门店" prop="store_name"></el-table-column>
          <el-table-column label="优惠券名称" prop="title"></el-table-column>
          <el-table-column label="使用人" prop="">
            <template slot-scope="scope">
              <span v-if="scope.row.user">{{ scope.row.user.username }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="user.phone"
            label="手机号"
            min-width="100px"
          >
          </el-table-column>
          <el-table-column
            prop="out_trade_no"
            label="订单编号"
            min-width="100px"
          >
          </el-table-column>
          <!-- <el-table-column prop="" label="状态">
              <template slot-scope="scope">
                <span>{{scope.row.status | typeStatus}}</span>
              </template>
          </el-table-column> -->
          <!-- <el-table-column label="适用范围">
            <template slot-scope="scope">
              <span>{{ scope.row.coupon_scope_use_id | type }}</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="goods_total" label="订单金额（元）">
          </el-table-column>
          <el-table-column prop="coupon_money" label="优惠金额（元）">
          </el-table-column>
          <!-- <el-table-column prop="coupon_pool_id" label="优惠券编号">
          </el-table-column> -->
          <!-- <el-table-column prop="create_time" label="所属分组" > </el-table-column> -->
          <!-- <el-table-column prop="year" label="订单完成日期"> </el-table-column>
          <el-table-column prop="time" label="订单完成时间"> </el-table-column> -->
          <el-table-column fixed="right" width="120" label="操作">
            <template slot-scope="scope">
              <!-- 调整到订单详情页面 -->
              <span @click="setRow(scope.row)" class="tab-hui-text"
                >查看订单</span
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <router-view></router-view>
    <!-- <el-dialog title="发放优惠券" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="form">
                <el-form-item label="手机号/会员卡号" >
                    <el-input v-model="paging.username" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: "",
      dialogFormVisible: false,
      recordList: [],
      loading: false,
      loading2: false,
      isBtn: false,
      dialogVisible: false,
      paging: {
        phone:"",
        store_id: "",
        orders_id: "",
        coupon_pool_id: "",
        start_time: "",
        end_time: "",
        page: 1,
        total: 0,
        limit: 10,
      },
      form: {
        date: "",
      },
      list: [],
      tableData: [
        {
          username: "111",
          code: "111",
          create_time: "111",
        },
      ],
    };
  },
  created() {
    if (this.$route.path == "/usageRecord") {
      this.handleCurrentChange(1);
    }
    this.getList();
  },
  filters: {
    typeName(val) {
      switch (val) {
        case 0:
          val = "未使用";
          break;
        case 1:
          val = "已使用";
          break;
        case 2:
          val = "已失效";
          break;
      }
      return val;
    },
    type(val) {
      switch (val) {
        case 0:
          val = "通用券";
          break;
        case 1:
          val = "商品券";
          break;
        case 2:
          val = "项目券";
          break;
      }
      return val;
    },
    typeStatus(val) {
      switch (val) {
        case 1:
          val = "待付款";
          break;
        case 2:
          val = "待发货";
          break;
        case 3:
          val = "待收货";
          break;
        case 4:
          val = "已完成";
          break;
        case 5:
          val = "已取消";
          break;
        case 6:
          val = "退款中（待验证）";
          break;
        case 7:
          val = "已退款";
          break;
        case 8:
          val = "已评价";
          break;
        case 9:
          val = "部分退款";
          break;
        case 10:
          val = "待消费";
          break;
      }
      return val;
    },
  },
  methods: {
    async setRow(row) {
      // 项目
      if (row.order_type == 0) {
        this.utils.goUrl(
          `/orderInfo?id=${row.orders_id}&type=2&title=订单详情&store_id=${row.store_id}`
        );
        // 商品
      } else {
        this.utils.goUrl(`/goodsOrderInfo?id=${row.orders_id}`);
      }
      return;
      // 如果是已使用过优惠券跳转到订单详情
    },
    //  获取所有门店
    async getList() {
      let { code, data } = await this.$Http.getAllStore();
      this.list = data;
    },
    handleClose(dom) {
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
      dom && dom();
    },
    async repairGetList() {
      this.loading = true;
      let { code, data } = await this.$Http.useCouponRecord(this.paging);
      this.loading = false;
      if (code) {
        this.tableData = data.data;
        this.paging.limit = data.per_page;
        this.paging.total = data.total;
      }
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      this.form.date = "";
      this.handleCurrentChange(1);
    },
    handleSizeChange(val) {
      this.paging.limit = val;
      this.repairGetList();
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.repairGetList();
    },
    pickerDate(e) {
      this.paging.end_time = this.getdate(e[1]);
      this.paging.start_time = this.getdate(e[0]);
    },
    getdate(time) {
      var now = new Date(time),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
      return (
        y +
        "-" +
        (m < 10 ? "0" + m : m) +
        "-" +
        (d < 10 ? "0" + d : d) +
        " " +
        now.toTimeString().substr(0, 8)
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
</style>